// import React from "react"
// import {
//   Chart,
//   Geom,
//   Axis,
//   Tooltip,
//   Legend,
// } from "bizcharts"
// import DataSet from "@antv/data-set"
//
// export default class Line extends React.Component {
//   render() {
//     const data = [
//       {
//         month: "Jan",
//         a: 7.0,
//         b: 3.9,
//         c: 5.9
//       },
//       {
//         month: "Feb",
//         a: 6.9,
//         b: 4.2,
//         c: 1.9
//       },
//       {
//         month: "Mar",
//         a: 9.5,
//         b: 5.7,
//         c: 3.9
//       },
//       {
//         month: "Apr",
//         a: 14.5,
//         b: 8.5,
//         c: 5.5
//       },
//       {
//         month: "May",
//         a: 18.4,
//         b: 11.9,
//         c: 8.9
//       },
//       {
//         month: "Jun",
//         a: 21.5,
//         b: 15.2,
//         c: 10.0
//       },
//       {
//         month: "Jul",
//         a: 25.2,
//         b: 17.0,
//         c: 12.9
//       },
//       {
//         month: "Aug",
//         a: 26.5,
//         b: 16.6,
//         c: 15.9
//       },
//       {
//         month: "Sep",
//         a: 23.3,
//         b: 14.2,
//         c: 20.7
//       },
//       {
//         month: "Oct",
//         a: 18.3,
//         b: 10.3,
//         c: 25.9
//       },
//       {
//         month: "Nov",
//         a: 13.9,
//         b: 6.6,
//         c: 30.9
//       },
//       {
//         month: "Dec",
//         a: 9.6,
//         b: 4.8,
//         c: 35.9
//       }
//     ]
//     const ds = new DataSet()
//     const dv = ds.createView().source(data)
//     dv.transform({
//       type: "fold",
//       fields: ["a", "b", "c"],
//       // 展开字段集
//       key: "city",
//       // key字段
//       value: "temperature" // value字段
//     })
//     const cols = {
//       month: {
//         range: [0, 1]
//       }
//     }
//     return (
//       <div style={{float: 'right', width: 750, height: 300}}>
//         <Chart height={250} data={dv} scale={cols} forceFit>
//           <Legend/>
//           <Axis name="month"/>
//           <Axis
//             name="temperature"
//             label={{
//               formatter: val => `${val}万个`
//             }}
//           />
//           <Tooltip
//             crosshairs={{
//               type: "y"
//             }}
//           />
//           <Geom
//             type="line"
//             position="month*temperature"
//             size={2}
//             color={"city"}
//             shape={"smooth"}
//           />
//           <Geom
//             type="point"
//             position="month*temperature"
//             size={4}
//             shape={"circle"}
//             color={"city"}
//             style={{
//               stroke: "#fff",
//               lineWidth: 1
//             }}
//           />
//         </Chart>
//       </div>
//     )
//   }
// }

import React from 'react';
import { Chart, Line, Point, Tooltip, Legend } from 'bizcharts';

// 数据源
const data = [
  {month: "Jan", city: "Tokyo", temperature: 7},
  {month: "Jan", city: "London", temperature: 3.9},
  {month: "Feb", city: "Tokyo", temperature: 6.9},
  {month: "Feb", city: "London", temperature: 4.2},
  {month: "Mar", city: "Tokyo", temperature: 9.5},
  {month: "Mar", city: "London", temperature: 5.7},
  {month: "Apr", city: "Tokyo", temperature: 14.5},
  {month: "Apr", city: "London", temperature: 8.5},
  {month: "May", city: "Tokyo", temperature: 18.4},
  {month: "May", city: "London", temperature: 11.9},
  {month: "Jun", city: "Tokyo", temperature: 21.5},
  {month: "Jun", city: "London", temperature: 15.2},
  {month: "Jul", city: "Tokyo", temperature: 25.2},
  {month: "Jul", city: "London", temperature: 17},
  {month: "Aug", city: "Tokyo", temperature: 26.5},
  {month: "Aug", city: "London", temperature: 16.6},
  {month: "Sep", city: "Tokyo", temperature: 23.3},
  {month: "Sep", city: "London", temperature: 14.2},
  {month: "Oct", city: "Tokyo", temperature: 18.3},
  {month: "Oct", city: "London", temperature: 10.3},
  {month: "Nov", city: "Tokyo", temperature: 13.9},
  {month: "Nov", city: "London", temperature: 6.6},
  {month: "Dec", city: "Tokyo", temperature: 9.6},
  {month: "Dec", city: "London", temperature: 4.8}
];

const scale = {
  temperature: { min: 0 },
  city: {
    formatter: v => {
      return {
        London: '伦敦',
        Tokyo: '东京'
      }[v]
    }
  }
}

function Line1() {
  return (
    <div style={{float: 'right', width: 750, height: 300}}>
      <Chart scale={scale} padding={[30, 20, 60, 40]} autoFit height={320} data={data} interactions={['element-active']}>
        <Point position="month*temperature" color="city" shape='circle' />
        <Line shape="smooth" position="month*temperature" color="city" label="temperature" />
        <Tooltip shared showCrosshairs />
        <Legend background={{
          padding:[5,100,5,36],
          style: {
            fill: '#eaeaea',
            stroke: '#fff'
          }
        }} />
      </Chart>
    </div>
  )
}

export default Line1



